<template>
	<view class="index">
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					运输单号
				</view>
				<view class="content">
					<text>{{ form.transportCode }}</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					停车位
				</view>
				<view class="content">
					<text>{{ form.parkingSpace }}</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					车辆
				</view>
			</view>
			<view class="form-content">
				<view class="form-item">
					<text class="label">车牌</text>
					<view class="value right">
						<text>{{form.licensePlateNo}}</text>
						<text v-if="form.vehicleModel">（{{form.vehicleModel}}）</text>
					</view>
				</view>
				<view class="form-item">
					<text class="label">司机</text>
					<view class="value right">
						{{ form.driverName }}
					</view>
				</view>
				<view class="form-item">
					<text class="label">运费</text>
					<view class="value right">
						<text v-if="form.freight > 0">{{ form.freight }}元</text>
						<text v-else>-</text>
					</view>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					装车工
				</view>
			</view>
			<view class="form-content">
				<view class="form-item">
					<text class="label">姓名</text>
					<view class="value right">
						{{ form.loaderName }}
					</view>
				</view>
				<view class="form-item">
					<text class="label">手机</text>
					<view class="value right">
						{{ form.loaderTel }}
					</view>
				</view>
			</view>
		</view>
		<view class="form-wrapper" v-if="transportDestination && transportDestination.length">
			<view class="form-title">
				<view class="title">
					目的地：
				</view>
			</view>
			<view class="form-content">
				<view class="form-item-wrapper" v-for="(item,index) in transportDestination" :key="index">
					<view class="form-item">
						<view class="value">
							<text>{{ index + 1 }}、</text>
							<text>{{ item.pickupPointCode }} {{ item.cityName }}.{{ item.pickupPointName }}</text>
						</view>
					</view>
					<view class="info-item">
						{{ item.pointAddress }}
					</view>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					载货阶段
				</view>
				<view class="content">
					<text>{{ form.schemaCaption }}</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					载货
				</view>
			</view>
			<view class="form-content">
				<view class="form-item" v-for="(item,index) in pickupPointList" :key="index">
					<view class="value">
						<text>{{ index + 1 }}、</text>
						<text>{{ item.cityName }}.{{ item.pickupPointName }}：{{ item.actualTonnage || 0 }}吨</text>
					</view>
					<!-- <text class="unit"></text> -->
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					计划到达
				</view>
				<view class="content">
					<text>{{ form.mayArrivalDate }}</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper" v-if="imagelist.length">
			<view class="form-title">
				<view class="title">
					图片
				</view>
			</view>
			<view class="product-image-list">
				<view class="item" v-for="(item,index) in imagelist" :key="index">
					<image @click="openPic(index)" :src="item+ '?imageView2/3/w/300/q/100'" class="product-image"
						mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<view class="form-wrapper" v-if="form.remark">
			<view class="form-title">
				<view class="title">
					备注
				</view>
			</view>
			<view class="form-content">
				<view class="form-item">
					<view class="value">
						<textarea v-model="form.remark" disabled maxlength="200" placeholder="" class="textarea" />
					</view>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					运输跟踪
				</view>
			</view>
			<view class="form-content">
				<view class="form-item" v-for="(item,index) in transportationTracking" :key="index">
					<view class="value">
						<text>{{ index + 1 }}、</text>
						<text>{{ item.message }}：</text>
						<text>{{ item.dateTime }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				params: {},
				form: {},
				pickupPointList: [], // 自提点列表
				transportDestination: [], //目的地
				transportationTracking: [], //运输跟踪
				imagelist: []
			}
		},
		onLoad(option) {
			this.params = JSON.parse(option.params)
			this.form.id = option.id;
			this.getInfo()
		},
		computed: {
			totalTonnage() {
				let number = 0;
				this.pickupPointList.forEach(item => {
					number += parseFloat(item.actualTonnage || 0)
				})
				return number;
			},
		},
		methods: {
			async getInfo() {
				const data = await this.$api.get('/app/transport/getInfo', {
					id: this.form.id
				})
				if (data.code === 200) {
					this.form = data.data;
					if (data.data.transportDestination) {
						this.transportDestination = JSON.parse(data.data.transportDestination)
					} else {
						this.transportDestination = []
					}
					if (data.data.imageUrl) {
						this.imagelist = data.data.imageUrl.split(',');
					}
					this.transportationTracking = JSON.parse(data.data.transportTracking)
					this.getPickupPointTonnage(data.data.cargoList)
				}
			},
			async getPickupPointTonnage(cargoList) {
				const data = await this.$api.post('/app/transport/getPickupPointTonnage', {
					cityId: this.form.cityId,
					supplyDate: this.form.dispatchDate,
					supplyWarehouseId: this.form.supplyWarehouseId
				})
				if (data.code === 200) {
					this.pickupPointList = data.data.filter(row => {
						const objIndex = cargoList.findIndex(rows => rows.pickupPointId === row
							.pickupPointId)
						row.cityName = cargoList[objIndex].cityName;
						return objIndex > -1;
					})
					console.log(this.pickupPointList)
				}
			},
			openPic(index) {
				uni.previewImage({
					urls: this.imagelist,
					current: index
				});
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding: 0 24upx 140upx 24upx;

		.form-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin-top: 20upx;

			.form-title {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 30upx;

				.title {
					font-size: 32upx;
					line-height: 32rpx;
					border-left: 8upx solid #F26022;
					padding-left: 20upx;
					height: 32upx;
					font-weight: bold;
					color: #141414;
				}

				.content {
					color: #3B3B3B;
					font-size: 30upx;
					display: flex;
					align-items: center;

					.placeholder {
						color: #666666;
					}
				}
			}

			.product-image-list {
				display: flex;
				flex-wrap: wrap;
				padding: 0 3%;

				.item {
					position: relative;
					width: 32%;
					height: 206upx;
					border-radius: 20upx;
					overflow: hidden;
					margin-left: 2%;
					margin-bottom: 20upx;

					&.add-item {
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F0F0F0;
					}

					&:nth-child(3n+1) {
						margin-left: 0;
					}

					.playImage {
						position: absolute;
						width: 50upx;
						height: 50upx;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.product-image {
						width: 100%;
						height: 100%;
					}

					.del-wrapper {
						position: absolute;
						width: 50upx;
						height: 50upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(0, 0, 0, .5);
						top: 0;
						right: 0;
					}

					.bottom-btn {
						position: absolute;
						width: 100%;
						height: 60upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(0, 0, 0, .5);
						bottom: 0;
						left: 0;
						color: #ffffff;

						&.current {
							color: #0D8EFF;
						}
					}
				}
			}


			.form-content {
				padding-bottom: 10upx;

				.form-item {
					display: flex;
					align-items: center;
					padding: 0 30upx;
					margin-bottom: 20upx;

					.label {
						color: #565656;
						width: 140upx;
					}

					.value {
						flex: 1;
						color: #3B3B3B;
						text-align: left;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						&.right {
							justify-content: flex-end;
						}

						.textarea {
							width: 100%;
							height: 150rpx;
						}
					}

					.unit {
						margin-left: 20upx;
						color: #676767;
					}
				}

				.info-item {
					padding: 0 30upx;
					font-size: 30upx;
					color: #898989;
					margin-top: -15upx;
					margin-bottom: 20upx;
				}

				.add-btn {
					font-size: 28upx;
					color: #F26022;
					margin-left: 30upx;
					margin-bottom: 20upx;
				}
			}
		}

		.btn-wrapper {
			height: 100upx;
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #F26022;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			transition: .1s linear;

			&:active {
				background-color: #F26022aa;
			}
		}

		.dest-popup-wrapper {
			min-height: 900upx;
			background-color: #ffffff;
			border-radius: 20upx 20upx 0 0;
			position: relative;
			bottom: calc(0upx - env(safe-area-inset-bottom));

			.title-wrapper {
				height: 88upx;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				padding: 0 32upx;
				border-radius: 20upx 20upx 0 0;
				justify-content: space-between;
			}

			.item {
				min-height: 88upx;
				padding: 20upx 32upx;
				border-bottom: 2upx solid #efefef;

				.label {
					color: #212121;
					font-size: 34upx;
					font-weight: bold;
				}

				.address {
					font-size: 28upx;
					color: #777777;
					margin-top: 10upx;
				}
			}
		}
	}
</style>